<style scoped lang="less">
.area-blk {
  padding: 0;
}
.setting-nav-wrap {
  padding: 10px 0 0;
  .unit-tree {
    padding: 0 10px;
    overflow: auto;
  }
  .unit-search {
    padding: 0 10px;
  }
}
.setting-nav {
  .icon {
    width: 16px;
    vertical-align: center;
    opacity: 0.9;
  }
}
</style>

<style lang="less">
.unit-search {
  margin-bottom: 10px;
  .el-input__inner {
    background: #0c276c;
    border-color: #0c276c;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    &:hover {
      background: #0c276c;
      border-color: #0c276c;
    }
  }
  .el-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
</style>
<template>
  <div class="page-census page-setting">
    <el-container :style="{ height: mainH + 'px' }">
      <el-aside
        class="setting-nav-wrap"
        width="200px"
        v-if="siteInfos.userType == 1"
      >
        <div class="unit-tree">
          <UnitList
            :height="mainH - 110"
            @select="onUnitSelect"
            ref="unitList"
          ></UnitList>
        </div>
      </el-aside>
      <el-main class="setting-main">
        <div class="crumbs">
          <router-link to="/">首页</router-link> /
          <span class="active">证书管理</span>
        </div>
        <el-container :style="{ height: mainH - 40 + 'px' }">
          <el-main class="census-main">
            <div class="opers flex v-c">
              <el-form :inline="true" class="filter-blk flex-1">
                <el-form-item label="名称">
                  <el-input
                    placeholder="请输入名称"
                    v-model.trim="filterForm.name"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getData">
                    <i class="iconfont icon-search"></i> 查询
                  </el-button>
                  <el-button
                    type="blue"
                    @click="newAction"
                    :class="{ 'is-disabled': !hasUnit }"
                    :disabled="!$store.getters.hasEditPermission"
                  >
                    <i class="iconfont icon-add"></i> 添加
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-table
              ref="tableRef"
              :data="dataList"
              style="width: 100%"
              v-loading="loading"
            >
              <el-table-column
                prop="number"
                label="证书编号"
                width="200"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="证书名称"
                width="200"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="type"
                label="证书类型"
                width="200"
                align="center"
              >
              <template slot-scope="scope">
                {{ Certificate.get(scope.row.type)  }}
              </template>
            </el-table-column>
              <el-table-column
                prop="initialDate"
                label="初领日期"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="dueDate"
                label="到期日期"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="reviewDate"
                label="复审日期"
                align="center"
              ></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    @click="editAction(scope.row)"
                    :class="{ 'is-disabled': !hasUnit }"
                    :disabled="!$store.getters.hasEditPermission"
                  >
                    编辑
                  </el-button>

                  <el-button
                    type="red"
                    @click="deleteAction(scope.row)"
                    :disabled="!$store.getters.hasEditPermission"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-if="total > 0"
              class="text-right mt-20 mr-20"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, total, jumper"
              :total="total"
            >
            </el-pagination>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
    <!-- 添加/编辑 start -->
    <el-dialog
      v-if="newModalVisible"
      :title="newModalTitle"
      :visible.sync="newModalVisible"
      width="550px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <New
        ref="newData"
        :unit="activeUnit"
        :activeData="activeData"
        @success="submitSuccessAction"
      ></New>
      <div slot="footer">
        <el-button type="cancel" @click="newModalVisible = false"
          >取消</el-button
        >
        <el-button type="primary" @click="submitAction">确定</el-button>
      </div>
    </el-dialog>
    <!-- 添加/编辑 end -->
  </div>
</template>
<script>
import { mapState } from "vuex";
import New from "./components/new.vue";
import UnitList from "@/components/equipment/UnitList.vue";

export default {
  name: "Equipment",
  components: {
    New,
    UnitList,
  },
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      type: this.$route.query.type || "place",
      unitData: [],
      unitKeyword: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
      activeUnitId: "",
      activeUnit: {},
      total: 0,
      currentPage: 1,
      pageSize: 10,
      filterForm: {},
      dataList: [],
      loading: false,
      newModalVisible: false,
      activeData: null,
      listUrl: "",
      detailtUrl: "",
      delUrl: "",
      Certificate:new Map([
        ['1','人员证书'],
        ['2','设备设施'],
        ['3','第三方检验'],
        ['4','行业资质'],
        ['5','标准化达标'],
      ])
    };
  },
  computed: {
    ...mapState(["siteInfos"]),
    mainH() {
      return this.winH - 180;
    },
    hasUnit() {
      return this.siteInfos.userType != 1 || this.activeUnit;
    },
  },
  watch: {
    $route(to, from) {
      this.type = to.query.type;
    },
  },
  created() {
    this.getData(1);
  },
  methods: {
    handleCurrentChange(page) {
      this.getData(page);
    },
    getDataById(id, cbk) {
      this.$get(this.detailtUrl, {
        id: id,
      }).then(
        (res) => {
          let thisData = res.data;
          cbk && cbk(thisData);
        },
        (err) => {
          //
        }
      );
    },
    editAction(item) {
        if (!this.hasUnit) {
          this.$message.error("请选择企业");
          return;
        }
      this.activeData = item;
      this.newModalTitle = "编辑";
      this.newModalVisible = true;
    },
    deleteAction(item) {
      this.showConfirm("确定删除该数据吗？", () => {
        this.$post('/business/business/delCertificate', {
          id: item.id,
        }).then(
          (res) => {
            this.$message.success("删除成功");
            this.getData(this.currentPage);
          },
          (err) => {
            this.$message.error(err.msg);
          }
        );
      });
    },
    submitSuccessAction() {
      this.adding = false;
      this.newModalVisible = false;
      this.getData(this.currentPage);
    },
    submitAction() {
      this.$refs.newData.submitAction();
    },
    newAction() {
      if (this.siteInfos.userType == 1 && !this.activeUnit) {
        this.$message.error("请选择企业");
        return;
      }
      this.activeData = null;
      this.newModalTitle = "添加";
      this.newModalVisible = true;
    },
    onUnitSelect(data) {
      if (data) {
        this.activeUnit = data;
      } else {
        this.activeUnit = null;
      }
      this.getData(1);
    },
    getData(page) {
      this.loading = true;
      let businessId = null;
      this.dataList = null;
      if (this.siteInfos.userType == 1) {
        businessId = this.activeUnit ? this.activeUnit.id : null;
      } else {
        businessId = this.siteInfos.homeId;
      }
      this.$get("/business/business/getCertificateList", {
        page: page,
        limit: this.pageSize,
        ...(businessId && { businessId }),
        ...this.filterForm,
      }).then(
        (res) => {
          this.loading = false;
          this.dataList = res.data.records;
        },
        (err) => {}
      );
    },
  },
};
</script>
<style lang="less" scoped>
.flowRate {
  /deep/.el-dialog__body {
    height: 13vh !important;
  }
}
.qrCode {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}
/deep/.qrCodevisible {
  .el-dialog__body {
    display: flex;
    justify-content: center !important;
    flex-direction: column;
    align-items: center;
  }
}
</style>
